<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
	<div id="example-1">
		<ul id="v-for-object" class="demo">
		<li v-for="value in object">{{value}}</li>
		</ul>
		<ul id="v-for-object" class="demo">
			<li v-for="(value,name) in object" v-bind:key="name"> {{ name }}: {{ value }}</li>
		</ul>
		<ul >
		<li v-for="(item,index) in items">{{ parentMessage }} -{{index}}-{{item.message}}</li>
		</ul>
	</div>
	
	
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
   var app = new Vue({
		 el: '#example-1',
		 data:{
		 object:{
			title:'How to do lists in Vue',
			author:'Jane Doe',
			publishedAt:'2016-04-10',
		 },
		 parentMessage :'Parent',
			items:[
				{message:'Foo'},
				{message:'Bar'},
			],
		 },
   }); 
</script>
</html>